<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		    .box{
		    	width: 500px;
		    	margin: 100px auto;
		    }
			#div1 div{
				width:500px;
	            height:300px;
	            background: #15C288;
	            text-align: center;
	            line-height: 300px;
	            font-size: 40px;
	            color: #D4D4D4;
	            display:none;
	        }  
	        input{
	        	padding: 10px 20px;
	        	border: none;
	        	border-radius: 5px;
	        	background: #AFD9EE;
	        }
            .active{
                background:#0094EF;
                color: #E9E9E9;
            } 
            
		</style>
	</head>
	<body>
		<div id="div1" class="box">  
		    <input class="active" type="button" value="第一名">  
		    <input type="button" value="第二名">  
		    <input type="button" value="第三名">  
		    <div style="display:block">周杰伦</div>  
		    <div>薛之谦</div>  
		    <div>张杰</div>  
		</div>  
	</body>
	<script>
		window.onload = function(){  
		    var t1 = new Tab("div1");  
		    t1.init();  
		}  		  
		function Tab(id){  
		    this.oParent = document.getElementById(id);  
		    this.aInput = this.oParent.getElementsByTagName("input");  
		    this.aDiv = this.oParent.getElementsByTagName("div");  
		    this.iNow = 0;  
		}  		  
		Tab.prototype.init = function(){  
		    var This = this;  
		    for(var i=0; i<this.aInput.length;i++){  
		        this.aInput[i].index = i;  
		        this.aInput[i].onclick=function(){  
		            This.change(this);  
		        }  
		    }     
		}  		  
		Tab.prototype.change = function(obj){  
		    for(var i=0; i<this.aInput.length;i++){  
		        this.aInput[i].className="";  
		        this.aDiv[i].style.display="none";  
		    }  
		    obj.className="active";  
		    this.aDiv[obj.index].style.display="block";  
		} 
	</script>
</html>
